<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    <style type="text/css">
      div{border: solid 1px black;margin: 10px;padding: 10px;}
    </style>
	</head>
	<body>
    <div id="app">
      <h1>{{title}}</h1>
      <p>我有一个：{{msg}}</p>
      <Child></Child>
    </div>
	</body>
  <script src="../vue.js"></script>
  
  <template id="kx">
    <div>
      <h2>{{title}}</h2>
      <p>我有一个：{{msg}}</p>
      <Child1></Child1>
      <Child2></Child2>
    </div>
  </template>
  
  <template id="yz">
    <div>
      <h2>{{title}}</h2>
      <p>我有一个：{{msg}} - {{tel}}</p>
      <p>接收到子的：{{a}}</p>
      <!-- 1. 在父组件调用子组件的位置，给子组件绑定自定义事件，添加事件处理函数 -->
      <Child @abc="getData"></Child>
    </div>
  </template>
  
  <template id="ql">
    <div>
      <h2>{{title}}</h2>
      <p>我有一个：{{msg}}</p>
      <button @click="send">向父发送一个数据</button>
    </div>
  </template>
  
  <template id="yx">
    <div>
      <h2>{{title}}</h2>
      <p>我有一个：{{msg}}</p>
    </div>
  </template>
  
  <script>
    
    // 努尔哈赤
    // ↓
    // 康熙
    // ↓
    // 雍正，胤祥
    // ↓
    // 乾隆
    
    const ql = {
      template:"#ql",
      data(){
        return {
          title:"乾隆",
          msg:"机器人"
        }
      },
      methods:{
        send(){
          // 3. 在子组件内部,使用this.$emit抛发自定义事件
          // this.$emit(参数1,参数2)
            // 参数1:自定义的事件名,
            // 参数2:要发送的数据
          this.$emit("abc", this.msg)
        }
      }
    }
    
    const yx = {
      template:"#yx",
      data(){
        return {
          title:"胤祥",
          msg:"宝马"
        }
      }
    }
    
    const yz = {
      template:"#yz",
      data(){
        return {
          title:"雍正",
          msg:"二环的四合院",
          tel:"诺基亚2700",
          a:""
        }
      },
      components:{
        Child:ql
      },
      methods:{
        // 2. 在父组件内部,定义自定义事件的处理函数,默认接收参数,参数即接收到的数据
        getData(d){
          // console.log(d);
          this.a = d
        }
      }
    }
    
    const kx = {
      template:"#kx",
      data(){
        return {
          title:"康熙",
          msg:"玉玺"
        }
      },
      components:{
        Child1:yz,
        Child2:yx
      }
    }
    
    
    
    new Vue({
      el:"#app",
      data:{
        title:"努尔哈赤",
        msg:"江山"
      },
      components:{
        Child:kx
      }
    })
    
    
  </script>
</html>
